<template>
    <div class="register-form">
        <h3 class="title">物联网安全管理系统</h3>
        <h5>注册</h5>
        <form @submit.prevent="register">
            <div>
                <label for="username">用户名:</label>
                <input type="text" id="username" v-model="username" @input="debounceInput">
                <span v-if="errors.username" class="error">{{ errors.username }}</span>
            </div>
            <div>
                <label for="password">密码:</label>
                <input type="password" id="password" v-model="password" @input="debounceInput">
                <span v-if="errors.password" class="error">{{ errors.password }}</span>
            </div>
            <div>
                <label for="confirm-password">确认密码:</label>
                <input type="password" id="confirm-password" v-model="confirmPassword" @input="debounceInput">
                <span v-if="errors.confirmPassword" class="error">{{ errors.confirmPassword }}</span>
            </div>
            <div>
                <label for="phone">手机号:</label>
                <input type="text" id="phone" v-model="phone" @input="debounceInput">
                <span v-if="errors.phone" class="error">{{ errors.phone }}</span>
            </div>
            <div>
                <label for="captcha">验证码:</label>
                <input type="text" id="captcha" v-model="captcha">
                <button @click="getCaptcha" :disabled="isCaptchaSent">获取验证码</button>
                <span v-if="errors.captcha" class="error">{{ errors.captcha }}</span>
            </div>
            <div>
                <button type="submit" :disabled="isSubmitting || isCaptchaSent === false">注册</button>
            </div>
        </form>
        <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
    </div>
</template>  
    
<script>
export default {
    data() {
        return {
            username: '',
            password: '',
            confirmPassword: '',
            phone: '',
            captcha: '',
            isSubmitting: false,
            errorMessage: '',
            errors: {
                username: '',
                password: '',
                confirmPassword: '',
                phone: '',
                captcha: ''
            },
            captchaSent: false,
            captchaCode: '',
            captchaExpiry: null
        };
    },
    created() {
        this.debounceInput = _.debounce(this.validateForm, 500); // 使用lodash的debounce方法  
    },
    methods: {
        getCaptcha() {
            if (!this.validatePhone()) {
                return;
            }
            this.captchaSent = true;
            this.captchaExpiry = Date.now() + 60000; // 设置验证码有效期为1分钟  
            this.captchaCode = Math.random().toString(36).substring(7);
            this.errors.captcha = '';
        },
        validateForm() {
            this.errors = {
                username: '',
                password: '',
                confirmPassword: '',
                phone: '',
                captcha: ''
            };

            if (!this.validateUsername()) {
                return;
            }
            if (!this.validatePassword()) {
                return;
            }
            if (!this.validateConfirmPassword()) {
                return;
            }
            if (!this.validatePhone()) {
                return;
            }
            if (!this.validateCaptcha()) {
                return;
            }
            if (!this.validateCaptcha()) {
                return;
            }
        },
        validateUsername() {
            const re = /^[a-zA-Z0-9_]{4,16}$/;
            if (!re.test(this.username)) {
                this.errors.username = '用户名必须为4-16位的字母、数字或下划线组合';
                return false;
            }
            this.errors.username = '';
            return true;
        },
        validatePassword() {
            const re = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;
            if (!re.test(this.password)) {
                this.errors.password = '密码必须至少包含一个大写字母、一个小写字母和一个数字，且长度至少为8位';
                return false;
            }
            this.errors.password = '';
            return true;
        },

        validateConfirmPassword() {
            if (this.password !== this.confirmPassword) {
                this.errors.confirmPassword = '两次输入的密码不一致';
                return false;
            }
            this.errors.confirmPassword = '';
            return true;
        },

        validatePhone() {
            const re = /^1[3456789]\d{9}$/;
            if (!re.test(this.phone)) {
                this.errors.phone = '请输入正确的手机号码';
                return false;
            }
            this.errors.phone = '';
            return true;
        },

        validateCaptcha() {
            if (Date.now() > this.captchaExpiry) {
                this.errors.captcha = '验证码已过期，请重新获取';
                this.captchaSent = false;
                return false;
            }
            if (this.captcha !== this.captchaCode) {
                this.errors.captcha = '验证码输入错误';
                return false;
            }
            this.errors.captcha = '';
            return true;
        },
        register() {
            if (!this.validateForm()) {
                return;
            }

            this.isSubmitting = true;
            // 注册操作  
            setTimeout(() => {
                this.isSubmitting = false;
                if (this.validateForm()) { // 再次验证，确保数据在提交期间没有变化  
                    this.errorMessage = ''; // 注册成功，清空错误信息  
                    // 重置表单  
                    this.username = '';
                    this.password = '';
                    this.confirmPassword = '';
                    this.phone = '';
                    this.captcha = '';
                    this.captchaSent = false;
                } else {
                    this.errorMessage = '注册失败，请检查输入的信息';
                }
            }, 1000); // 这是一个异步请求，这里使用setTimeout模拟  
        }
    }

    } 
</script>